<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/iconfont.css">
    <link rel="stylesheet" href="./static/js/mui/css/mui.min.css">
    <link rel="stylesheet" href="./css/products.css">
    <script src="./static/js/jquery/jquery.js"></script>
    <script src="./static/js/mui/js/mui.min.js"></script>
</head>

<body>

    <header id="header" class="mui-bar mui-bar-nav">



        <a class="mui-icon mui-icon-bars   mui-pull-right"></a>
        <a class=" mui-icon  " href="#">开饭了</a>
    </header>




    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item " href="#tabbar">
            <!-- mui-icon -->
            <span class="  mui-icon  iconfont  icon-home mui-active"></span>

        </a>
        <a class="mui-tab-item" href="#tabbar-with-map">
            <span class="mui-icon   iconfont  icon-team"></span>

        </a>

        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon mui-icon-list "></span>

        </a>

    </nav>






    <div class="mui-content">
        <!-- 内容区域 -->


        <div class="mui-input-row mui-search ">
            <input type="search" class="mui-input-clear mySearch" placeholder="搜索菜品名称和原料...">
        </div>
        <ul class="mui-table-view  productULBox">


        </ul>

    </div>
    <script src="./static/js/template/template-web.js"></script>
    <script type="html/text" id="prductsTmp">
        {{each   subjects   item }}
        <li class="mui-table-view-cell mui-media" >
            <a href="#">
                <img class="mui-media-object " src="./img/{{item.img_lg}}">
                <div class="mui-media-body">
                    <div class="clear-fix">
                        <h4>{{item.name}}</h4>
                        <p class='mui-ellipsis'>主要材料{{item.material}}</p>
                        <p class='mui-ellipsis'>{{item.detail}}</p>
                        <span>{{item.price}}</span>
                    </div>
                    
                </div>
            </a>
        </li>
        {{/each}}
    </script>
    <script>
        $(function(){
            //获取商品详情
            var mydid= window.location.search.substr(1)  

            
            console.log(mydid)
            $.ajax({
                url:'http://mengtion.vip/kfl-api/api/getItem.php',
                type: 'post',
                dataType: 'json',
                data:{
                    did:mydid
                },
                success(res){
                    console.log(res);
                    var productsHtml=template('prductsTmp',res)
                    $('.productULBox').html(productsHtml)
                }
                
            })
            
        })
    </script>







</body>

</html>